import { useState, useEffect, useMemo } from 'react';
import cssBgc from '../static/style/components/bgc.scss';
import { Button, BackTop } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import iconUrl from '../util/iconUrl';
import API from '../util/apiUrl';

const IconFont = createFromIconfontCN({
  scriptUrl: iconUrl,
});

const Bgc = (props) => {
  console.log('bgc props', props);
  const btns = props.btns && [...props.btns];

  const [sentence, setSentence] = useState('正在加载句子..');
  const [bgimg, setBgimg] = useState({});

  useEffect(() => {
      ysImg();
  }, [props.bgcUrl]);

  useEffect(() => {
    getSentence();
  },[]);

  // 获取句子
  const getSentence = () => {
    let a = () => {
      API.getSentence().then((res) => {
        console.log('res getSentence', res);
        setSentence(res.data[0].content);
      });
    };
    a();
  };

  // 判断是否为手机
  function isMobile() {
    var userAgentInfo = navigator.userAgent;

    var mobileAgents = [
      'Android',
      'iPhone',
      'SymbianOS',
      'Windows Phone',
      'iPad',
      'iPod',
    ];
    var mobile_flag = false;
    //根据userAgent判断是否是手机
    for (var v = 0; v < mobileAgents.length; v++) {
      if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
        mobile_flag = true;
        break;
      }
    }
    var screen_width = window.screen.width;
    var screen_height = window.screen.height;
    //根据屏幕分辨率判断是否是手机
    if (screen_width < 500 && screen_height < 800) {
      mobile_flag = true;
    }
    return mobile_flag;
  }

  // 是手机就用压缩图
  const ysImg = () => {
    if (Object.keys(props.bgcUrl).length&&isMobile()) {
      // setBgimg({ ...props.bgcUrl });
      let bgimg2 = { ...props.bgcUrl };
      console.log('是手机');
      let ysImg = bgimg2.carousel_img.split('.');
      ysImg[ysImg.length - 2] += 'ys';
      ysImg = ysImg.join('.');
      bgimg2.carousel_img = ysImg;
      setBgimg(bgimg2);
    }else{
      setBgimg({...props.bgcUrl});

    }
  };

  return (
    <div
      className={cssBgc.bgcImg}
      style={{
        backgroundImage: `url(${bgimg.carousel_img})`,
        borderRightColor: props.carousel_img ? null : '#364d79',
      }}
    >
      <div className={cssBgc.content}>
        <div className={cssBgc.title}>
          <h3>{bgimg.name}</h3>
          <p>{sentence}</p>
        </div>
        <div className={cssBgc.btnWid}>
          <div className={cssBgc.btns}>
            {btns
              ? btns.map((i) => (
                  <Button
                    key={i.id}
                    className={cssBgc.btn}
                    icon={
                      <IconFont
                        className={cssBgc.icon}
                        type={i.icon}
                        style={{ fontSize: i.fosi || 20 }}
                      />
                    }
                    ghost
                    size={'large'}
                    shape="round"
                    onClick={() => {
                      props.scrollTo(i.id);
                    }}
                  >
                    {i.name}
                  </Button>
                ))
              : null}
            {/* <Button className={cssBgc.btn} icon={<FileTextOutlined />} ghost size={'large'} shape="round" onClick={()=>{props.scrollTo(true)}}>所有文章</Button> */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Bgc;
